<script setup lang="ts">
import { ref } from 'vue'
import type { NavsList } from '@/types/consult'
import { useConsultStore } from '@/stores'
const classify = ref<NavsList[]>([
  {
    title: '三甲图文问诊',
    tip: '三甲主治及以上级别医生',
    icon: 'consult-doctor',
    path: '',
    type: 1
  },
  {
    title: '普通图文问诊',
    tip: '二甲主治及以上级别医生',
    icon: 'consult-message',
    path: '',
    type: 0
  }
])
const store = useConsultStore()
</script>

<template>
  <div class="fast-consult-page">
    <DP-NavBar
      title="极速问诊"
      right-text="问诊记录"
      :back="
        () => {
          $router.push({ name: 'home' })
        }
      "
      @click-right="$router.push({ name: 'ConsultRecord' })"
    ></DP-NavBar>
    <div class="fast-login">
      <img src="@/assets/consult-fast.png" alt="" />
      <p><span>20s</span> 快速匹配专业医生</p>
    </div>
    <div class="classify">
      <van-row
        v-for="(item, index) in classify"
        :key="index"
        class="classify-item"
        justify="space-between"
        align="center"
      >
        <van-col>
          <DP-Icon :name="item.icon" :size="38"></DP-Icon>
        </van-col>
        <van-col class="info">
          <p class="title">{{ item.title }}</p>
          <p class="tip">{{ item.tip }}</p>
        </van-col>
        <van-col
          ><router-link
            :to="{ name: 'DepConsult' }"
            @click="store.setIllnessType(item.type as 0 | 1)"
            ><van-icon name="arrow" color="#C3C3C5" /></router-link
        ></van-col>
      </van-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fast-consult-page {
  padding-top: 46px;
}
.fast-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 30px 0;
  img {
    width: 240px;
    background-size: contain;
  }
  p {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 500;
    span {
      color: var(--cp-primary);
    }
  }
}
.classify {
  margin: 15px;
  .classify-item {
    border: 1px solid #f5f5f5;
    height: 75.5px;
    margin-bottom: 20px;
    padding: 0 10px;
    border-radius: 5px;
    .info {
      flex: 1;
      margin-left: 10px;
      .title {
        font-weight: 500;
        color: var(--cp-text1);
      }
      .tip {
        font-size: 12px;
        color: var(--cp-dark);
        margin-top: 5px;
      }
    }
  }
}
</style>
